<template>
	<view>
		<uni-popup ref="popup" @change="popupChange">
			<view class="popup-content">
				<view class="title">
					选择影片
				</view>
				<view class="select-box">
					<view class="table">
						<uni-data-select v-model="table" :localdata="range" @change="selectChange">
						</uni-data-select>
					</view>
					<view class="name">
						<uni-easyinput placeholder="请输入剧名" @change="search" v-model="name"
							:clearable="false"></uni-easyinput>
					</view>
				</view>
				<scroll-view scroll-y="true" class="scroll" :show-scrollbar="false">
					<view class="play-list">
						<view class="video-name" v-for="(item,index) in dataArray" :key="item._id" @click="selectVideo(item)">{{item._id}}</view>
					</view>
				</scroll-view>

			</view>
		</uni-popup>
	</view>
</template>

<script>
	const db = uniCloud.database()
	export default {
		props: {

		},
		name: "get-video-name",
		data() {
			return {
				range: [{
						value: "video",
						text: "电视剧"
					},
					{
						value: "film-video",
						text: "电影",
					},
					{
						value: "comic-video",
						text: "动漫"
					},
					{
						value: "variety-video",
						text: "综艺"
					}
				],
				table: "",
				name: "",
				dataArray: []
			};
		},
		mounted() {
			this.$refs.popup.open("center")
		},
		methods: {
			//选择视频
			selectVideo(data) {
				this.$set(data,"table",this.table)
				this.$emit("change", data)
			},
			selectChange(e){
				this.table = e
				if (this.table && this.name) {
					this.getVideoByname(this.name, this.table)
				}
			},
			search(e) {
				if (this.table) {
					if (e) {
						this.getVideoByname(e, this.table)
					}
				} else {
					uni.showToast({
						icon: "none",
						title: "选择类型以获得推荐"
					})
				}
			},
			popupChange(e) {
				if (!e.show) {
					this.$emit("close")
				}
			},
			getVideoByname(name, table) {
				uni.showLoading({
					title:"搜索中"
				})
				db.collection(table).where({
						_id: new RegExp(`${name}`)
					}).field("_id,imgUrl,toStar,status,year,type,synopsis")
					.get().then((res) => {
						const data = res.result.data
						if (data) {
							this.dataArray = data
						}
					}).catch((err) => {
						uni.showModal({
							content: err.message || '请求服务失败',
							showCancel: false
						})
					}).finally(e=>{
						uni.hideLoading()
					})
			}
		}
	}
</script>

<style>
	.popup-content {
		width: 1200rpx;
		height: 800rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		overflow: hidden;
	}

	.title {
		font-size: 36rpx;
		line-height: 110rpx;
		border-bottom: 2rpx solid #ececec;
		padding-left: 36rpx;
	}

	.select-box {
		padding-left: 36rpx;
	}

	.table {
		width: 300rpx;
		margin-top: 32rpx;
	}

	.name {
		margin-top: 32rpx;
		width: 1000rpx;
	}

	.play-list {
		display: flex;
		flex-wrap: wrap;
	}

	.video-name {
		border: 1px solid #F0F0F0;
		border-radius: 4px;
		font-size: 28rpx;
		line-height: 70rpx;
		height: 70rpx;
		padding:0 20rpx;
		background-color: #EEEEEE;
		margin: 10rpx;
		cursor:pointer;
	}
	.video-name:hover{
		background-color: #e43d33;
		color: #FFFFFF;
	}
	.scroll{
		padding-left: 36rpx;
		margin-top: 32rpx;
		height: 448rpx;
	}
</style>